<template>
  <div class="Ranking-container">
    <table class="Ranking-table">
      <thead>
        <tr>
          <th class="Ranking-th" style="width: calc(30%);">项目名称</th>
          <th class="Ranking-th">当前</th>
          <th class="Ranking-th">当月</th>
          <th class="Ranking-th">累计</th>
          <th class="Ranking-th">能效目标</th>
          <th class="Ranking-th">达标率</th>
        </tr>
      </thead>
    </table>
    <VueSeamlessScroll :data="energyList" :class-option="classOption" style="height: 100%;overflow:hidden;">
      <div class="Ranking-item" v-for="(item, index) in energyList" :key="index">
        <div class="flex-between mb5">
          <span class="Ranking-name">{{item.projectName}}</span>
          <span class="Ranking-th">{{ parseFloat(item.currentCop).toFixed(1) }}</span>
          <span class="Ranking-th">{{ parseFloat(item.monthCop).toFixed(1) }}</span>
          <span class="Ranking-th">{{ parseFloat(item.totalCop).toFixed(1) }}</span>
          <span class="Ranking-th">{{ parseFloat(item.targetCop).toFixed(1) }}</span>
          <span :class="changeAlarmBg(parseFloat(item.complianceRate).toFixed(1))">{{ parseFloat(item.complianceRate).toFixed(1) }}%</span>
        </div>
      </div>
    </VueSeamlessScroll>
  </div>
</template>

<script>
import VueSeamlessScroll from "vue-seamless-scroll";
import {getProjectSynclist} from "@/api/system/energy";
export default {
  props: {
    projectType: {
      type: String,
      default: 0,
    },
  },
  components: {
    VueSeamlessScroll,
  },
  data() {
    return {
      energyList:[],
    }
  },
  computed: {
    classOption() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开启无缝滚动的数据量 设置(数值<页面展示数据条数不滚)(超过页面展示条数滚动)
        openWatch: true, // 开启数据实时监控刷新dom
        // singleHeight: 30,
        // waitTime: 2500, // 单行停顿时间(singleHeight,waitTime)
      };
    },
  },
  methods: {
    changeAlarmBg(level) {
      if (level>90&&level<=200){
        return 'alarm-normal'
      }
      else if (level>50&&level<=90){
        return 'alarm-warning'
      }
      else {
        return 'alarm-danger'
      }
    },
    getEnergyList(){
      getProjectSynclist({TypeId:this.projectType}).then(res =>{
        //console.log(res)
        if(!res.data) {
          return
        }
        this.energyList = res.data;
      })
    }
  },
  created() {
    this.getEnergyList()
    //console.log('===='+this.projectType)
  }
}
</script>

<style scoped lang="scss">
.Ranking-container {
  width: 100%;
  height: 100%;
  /*  padding: 12px 12px 0;  */
  font-size: 14px;

  .Ranking-table{
    width:100%;
  }
  .Ranking-th{
    width: calc(14%);
    color: #7393b3;
    text-align: center;
  }

  .Ranking-item {
    padding: 12px 0;
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, #00d0fe 0%, #286be9 50%, #00d0fe 100%) 2 2 2 2;
    .Ranking-name {
      font-weight: bold;
      color: #00d0fe;
      width: calc(30%);
      text-align: center;
    }
    .item-level {
      padding: 2px 8px;
      font-size: 13px;
      color: #fff;
      border-radius: 10px 0 10px 0;
    }

    .alarm-normal {
      //background: #67c23a;
      width: calc(14%);
      color:#67c23a;
      text-align: center;
    }
    .alarm-warning {
      //background: #e6a23c;
      width: calc(14%);
      color: #e6a23c;
      text-align: center;
    }
    .alarm-danger {
      //background: #f56c6c;
      width: calc(14%);
      color: #f56c6c;
      text-align: center;
    }
  }
}
</style>
